<template>
  <!-- 返回顶部按钮组件 -->
  <div class="back-to-top" v-show="visible" @click="scrollToTop">
    <div class="arrow"></div>
  </div>
</template>

<script>
/**
 * 返回顶部按钮组件
 * 提供一个固定位置的悬浮按钮，点击后平滑滚动到页面顶部
 */
export default {
  name: 'BackToTop',
  data() {
    return {
      visible: true // 控制按钮显示状态
    }
  },
  mounted() {
    // 添加滚动事件监听
    window.addEventListener('scroll', this.handleScroll)
    // 初始检查滚动位置
    this.handleScroll()
  },
  beforeUnmount() {
    // 组件销毁前移除事件监听
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    /**
     * 处理页面滚动事件
     * 控制返回顶部按钮的显示状态
     */
    handleScroll() {
      this.visible = true;
    },
    /**
     * 平滑滚动到页面顶部
     * 使用固定步长和间隔实现平滑滚动效果
     */
    scrollToTop() {
      // 获取当前滚动位置
      const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
      
      // 如果已经在顶部，不需要做任何事
      if (scrollTop <= 0) return
      
      // 固定步长滚动
      let yPos = scrollTop
      const interval = 16  // 约60fps
      const step = Math.max(10, Math.floor(scrollTop / 25))  // 将总距离分为25步，但最小步长为10px
      
      function scroll() {
        yPos = Math.max(0, yPos - step)
        window.scrollTo(0, yPos)
        document.body.scrollTop = yPos
        document.documentElement.scrollTop = yPos
        
        if (yPos > 0) {
          setTimeout(scroll, interval)
        }
      }
      
      scroll()
    }
  }
}
</script>

<style scoped>
/* 返回顶部按钮容器样式 */
.back-to-top {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 9999;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 鼠标悬停效果 */
.back-to-top:hover {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 箭头图标样式 */
.arrow {
  width: 12px;
  height: 12px;
  border-top: 2px solid #666;
  border-right: 2px solid #666;
  transform: rotate(-45deg);
  margin-top: 4px;
}
</style> 